<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <ul >
      <li v-for='(article,index) in articles' :key="article.id" > {{ index+1 }} / {{article.rating.average}}/ {{article.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'VueResourceComponents',
  data () {
    return {
      title: '豆瓣电影 排行榜',
      articles: []
    }
  },
  mounted: function () {
    this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=50', {}, {
      headers: {},
      emulateJSON: true
    }).then(function (response) {
      // 这里是处理正确的回调
      this.articles = response.data.subjects
      // this.articles = response.data["subjects"] 也可以
    }, function (response) {
      // 这里是处理错误的回调
      console.log(response)
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>
